<template>
	<view class="zq-box" :style="{
		'position':settings.position,
		'width':settings.width + 'rpx',
		'height':!settings.height ? '' : settings.height + 'rpx',
		'background':settings.background,
		'padding':settings.padding,
		'borderRadius':settings.borderRadius + 'rpx',
		'marginLeft':(settings.marginLeft == null ? (750 - settings.width) / 2 : settings.marginLeft) + 'rpx',
		'marginTop':(settings.marginTop || 20) + 'rpx',
		'boxShadow':settings.boxShadow,
		'animationDuration':settings.duration + 's'
	}" :class="{
		'zq-box-click':settings.isClickMove,
		'zq-box-show':settings.isMove && show,
		'zq-box-hide':!show,
		'zq-box-opacity':show && moveMode == 'opacity',
		'zq-box-scale':show && moveMode == 'scale',
		'zq-box-top':show && moveMode == 'top',
		'zq-box-top-shake':show && moveMode == 'topShake',
		'zq-box-left':show && moveMode == 'left',
		'zq-box-right':show && moveMode == 'right',
		'zq-box-left-rotate':show && moveMode == 'leftRotate',
		'zq-box-right-rotate':show && moveMode == 'rightRotate'
	}" @click.stop="handle">
		<slot></slot>
	</view>
</template>

<script>
	export default{
		props:{
			props:{
				default:null,
				type:Object
			},
			value:{//滚动高度
				default:null,
				type:Number
			},
			moveMode:{//leftRotate向左旋转  rightRotate向右旋转  scale放大 top向上 left向左 right向右 opacity透明 topShake向上震动
				default:"scale",
				type:String
			}
		},
		watch:{
			value(nVal){
				this.scrollTop = nVal;
				this.watchTop();
			},
			props(nVal){
				this.settings = Object.assign(this.settings,this.$store && this.$store.state.zqBoxSettings ? this.$store.state.zqBoxSettings : {},nVal || {})
			}
		},
		data(){
			return{
				settings:{
					position:'relative',//盒子的定位
					width:710,//盒子的宽度
					height:null,//盒子的高度
					background:"#FFFFFF",//盒子的背景颜色
					padding:"30rpx 20rpx",//盒子的内边距
					marginLeft:null,//盒子的左外边距
					marginTop:20,//盒子的上外边距
					borderRadius:16,//盒子的圆角
					boxShadow:'0 0 20rpx rgba(0,0,0,0.2)',//盒子的阴影
					isClickMove:true,//是否使用点击动画
					isMove:true,//是否使用动画
					duration:0.6,//动画时长
					showBottom:30,//距离底部多少开始展示
					boxTop:null,//盒子的当前高度
				},
				scrollTop:null,//滚动的高度
				screenHeight:0,//可视窗口
				show:true//是否显示
			}
		},
		mounted() {
			this.scrollTop = this.value;
			this.settings = Object.assign(this.settings,this.$store && this.$store.state.zqBoxSettings ? this.$store.state.zqBoxSettings : {},this.props || {})
		},
		created() {
			uni.getSystemInfo({
				success:(res)=> {
					this.screenHeight = res.screenHeight;
				}
			})
			if(!this.settings.boxTop && this.value != null){
				setTimeout(()=>{
					let query = uni.createSelectorQuery().in(this);
					query.select(".zq-box").boundingClientRect(event =>{
						this.settings.boxTop = event.top + this.scrollTop;
						this.watchTop();
					}).exec();
				},30)
			}
		},
		methods:{
			handle(event){
				this.$emit("click",event);
			},
			watchTop(){//监听控制盒子的展示
				if(this.settings.boxTop - this.scrollTop - this.settings.showBottom < this.screenHeight){
					this.show = true;
				}else{
					this.show = false;
				}
			}
		}
	}
</script>

<style lang="scss">
	.zq-box{box-sizing: border-box;overflow: hidden;}
	// .zq-box-click:active{filter: brightness(95%);transform: scale(0.98);transition: all 0.3s;}
	// .zq-box-hide{transform: scale(0);opacity: 0;transition: all 0.3s;}
	
	// .zq-box-opacity{animation-name: zqBoxMoveOpacity;}
	// .zq-box-scale{animation-name: zqBoxMoveScale;}
	// .zq-box-top{animation-name: zqBoxMoveTop;}
	// .zq-box-top-shake{animation-name: zqBoxMoveTopShake;}
	// .zq-box-left{animation-name: zqBoxMoveLeft;}
	// .zq-box-right{animation-name: zqBoxMoveRight;}
	// .zq-box-right-rotate{animation-name: zqBoxMoveRightRotate;}
	// .zq-box-left-rotate{animation-name: zqBoxMoveLeftRotate;}
	
	@keyframes zqBoxMoveOpacity{
		0%{opacity: 0;}
		100%{opacity: 1;}
	}
	
	@keyframes zqBoxMoveScale{
		0%{transform: scale(0);opacity: 0;}
		100%{transform: scale(1);opacity: 1;}
	}
	
	@keyframes zqBoxMoveTop{
		0%{transform: translateY(300rpx);opacity: 0;}
		100%{transform: translateY(0);opacity: 1;}
	}
	
	@keyframes zqBoxMoveTopShake{
		0%,60%,75%,90%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)}
		0%{opacity:0;-webkit-transform:translate3d(0,300rpx,0);transform:translate3d(0,300rpx,0)}
		60%{opacity:1;-webkit-transform:translate3d(0,-25rpx,0);transform:translate3d(0,-25rpx,0)}
		75%{-webkit-transform:translate3d(0,10rpx,0);transform:translate3d(0,10rpx,0)}
		90%{-webkit-transform:translate3d(0,-5rpx,0);transform:translate3d(0,-5rpx,0)}
		100%{-webkit-transform:none;transform:none}
	}
	
	
	@keyframes zqBoxMoveLeft{
		0%{transform: translateX(100%);opacity: 0;}
		100%{transform: translateY(0);opacity: 1;}
	}
	
	@keyframes zqBoxMoveRight{
		0%{transform: translateX(-100%);opacity: 0;}
		100%{transform: translateY(0);opacity: 1;}
	}
	
	@keyframes zqBoxMoveRightRotate{
		0%{transform: translateX(-100%) rotate(-180deg);opacity: 0;}
		100%{transform: translateY(0) rotate(0);opacity: 1;}
	}
	
	@keyframes zqBoxMoveLeftRotate{
		0%{transform: translateX(100%) rotate(180deg);opacity: 0;}
		100%{transform: translateY(0) rotate(0);opacity: 1;}
	}
</style>
